import { componentStyle } from '../common/common'
import { hexColorToRGBA } from '@/components/vis/chart/chart/util'
import { BASE_ECHARTS_SELECT, DEFAULT_THRESHOLD } from '@/components/vis/chart/chart/chart'
import { getScaleValue } from '@/components/canvas/utils/style'

export function baseGaugeOption(chart_option, chart, scale = 1) {
  // 处理shape attr
  let customAttr = {}

  if (chart.customAttr) {
    customAttr = JSON.parse(chart.customAttr)
    if (customAttr.color) {
      chart_option.color = customAttr.color.colors
    }
    // tooltip
    if (customAttr.tooltip) {
      const tooltip = JSON.parse(JSON.stringify(customAttr.tooltip))
      const reg = new RegExp('\n', 'g')
      tooltip.formatter = tooltip.formatter.replace(reg, '<br/>')
      chart_option.tooltip = tooltip
    }
    if (customAttr.gauge) {
      if (customAttr.gauge.title) {
        chart_option.title = customAttr.gauge.title
      }
      if (customAttr.gauge.axisLabel) {
        chart_option.axisLabel = customAttr.gauge.axisLabel
        chart_option.axisLabel.fontSize = getScaleValue(chart_option.axisLabel.fontSize, scale)
      }
    }
  }
  // 处理data
  if (chart.data) {
    chart_option.title.text = chart.title
    if (chart.data.series.length > 0) {
      chart_option.series[0].name = chart.data.series[0].name
      chart_option.series[0].title = JSON.parse(JSON.stringify(chart_option.title))
      // size
      if (customAttr.size) {
        chart_option.series[0].min = customAttr.size.gaugeMin
        chart_option.series[0].max = customAttr.size.gaugeMax
        chart_option.series[0].startAngle = customAttr.size.gaugeStartAngle
        chart_option.series[0].endAngle = customAttr.size.gaugeEndAngle
      }
      // detail
      if (customAttr.label) {
        const label = JSON.parse(JSON.stringify(customAttr.label))
        chart_option.series[0].detail.show = label.show
        chart_option.series[0].detail.fontSize = label.fontSize
        chart_option.series[0].detail.color = label.color
        chart_option.series[0].detail.formatter = label.gaugeFormatter
      }
      chart_option.series[0].type = 'gauge'
      // color
      chart_option.series[0].itemStyle = {
        color: hexColorToRGBA(customAttr.color.colors[0], customAttr.color.alpha),
      }
      chart_option.series[0].selectedMode = true
      chart_option.series[0].select = BASE_ECHARTS_SELECT
      // data只取第一个
      const y = {
        // name: chart.data.x[0],
        name: chart.data.series[0].name,
        value: chart.data.series[0].data[0],
      }
      chart_option.series[0].data.push(y)

      chart_option.series[0].axisTick = {
        distance: getScaleValue(-20, scale),
        splitNumber: getScaleValue(5, scale), // 刻度间隔数
        length: getScaleValue(10, scale), // 子刻度线长度
        lineStyle: {
          width: getScaleValue(2, scale), // 子刻度线宽度
        },
      }
      chart_option.series[0].splitLine = {
        distance: getScaleValue(-20, scale),
        length: getScaleValue(18, scale), // 刻度线长度
        lineStyle: {
          width: getScaleValue(2, scale), // 刻度线宽度
        },
      }
      chart_option.series[0].axisLabel = chart_option.axisLabel || {
        distance: getScaleValue(20, scale), // 刻度值文字里刻度线距离
        fontSize: getScaleValue(20, scale), // 刻度值字体大小
      }

      // threshold
      if (chart.senior) {
        const range = []
        let index = 0
        let flag = false
        const senior = JSON.parse(chart.senior)
        const threshold = JSON.parse(JSON.stringify(senior.threshold ? senior.threshold : DEFAULT_THRESHOLD))
        if (threshold.gaugeThreshold && threshold.gaugeThreshold !== '') {
          const arr = threshold.gaugeThreshold.split(',')
          const per = parseFloat(chart.data.series[0].data[0]) / parseFloat(chart_option.series[0].max)
          for (let i = 0; i < arr.length; i++) {
            const ele = arr[i]
            const p = parseFloat(ele) / 100
            range.push([
              p,
              hexColorToRGBA(customAttr.color.colors[i % customAttr.color.colors.length], customAttr.color.alpha),
            ])
            if (!flag && per <= p) {
              flag = true
              index = i
            }
          }
          if (!flag) {
            index = arr.length
          }

          range.push([
            1,
            hexColorToRGBA(
              customAttr.color.colors[arr.length % customAttr.color.colors.length],
              customAttr.color.alpha
            ),
          ])
          chart_option.series[0].axisLine = {
            lineStyle: {
              color: [
                [0.3, '#67e0e3'],
                [0.7, '#37a2da'],
                [1, '#fd666d'],
              ],
            },
          }

          chart_option.series[0].itemStyle = {
            color: hexColorToRGBA(customAttr.color.colors[index], customAttr.color.alpha),
          }
          chart_option.series[0].progress = {
            show: false,
          }
          chart_option.series[0].axisTick = {
            splitNumber: getScaleValue(5, scale), // 刻度间隔数
            length: getScaleValue(10, scale), // 子刻度线长度
            lineStyle: {
              color: 'auto',
              width: getScaleValue(2, scale), // 子刻度线宽度
            },
          }
          chart_option.series[0].splitLine = {
            length: getScaleValue(18, scale), // 刻度线长度
            lineStyle: {
              color: 'auto',
              width: getScaleValue(2, scale), // 刻度线宽度
            },
          }
          chart_option.series[0].axisLabel = {
            color: 'auto',
            distance: getScaleValue(20, scale), // 刻度值文字里刻度线距离
            fontSize: getScaleValue(20, scale), // 刻度值字体大小
          }
        }
      }
    }
  }
  componentStyle(chart_option, chart)
  let scaleNum = customAttr.gauge?.ratio || 1
  if (customAttr.gauge?.optionType === '1') {
    setOption1(chart_option, scale, scaleNum)
  } else if (customAttr.gauge?.optionType === '2') {
    setOption2(chart_option, scale, scaleNum, customAttr)
  }

  return chart_option
}

const setOption1 = (chart_option, scale, ratio) => {
  chart_option.series[0].axisTick = {
    distance: getScaleValue(-30 * ratio, scale, true),
    splitNumber: getScaleValue(5 * ratio, scale), // 刻度间隔数
    length: getScaleValue(8 * ratio, scale), // 子刻度线长度
    lineStyle: {
      width: getScaleValue(2 * ratio, scale),
      color: '#fff', // 子刻度线宽度
    },
  }
  chart_option.series[0].splitLine = {
    distance: getScaleValue(-30 * ratio, scale, true),
    length: getScaleValue(30 * ratio, scale), // 刻度线长度
    lineStyle: {
      width: getScaleValue(2 * ratio, scale), // 刻度线宽度
      color: '#fff',
    },
  }
  chart_option.series[0].axisLabel = {
    distance: getScaleValue(40 * ratio, scale), // 刻度值文字里刻度线距离
    fontSize: getScaleValue(14 * ratio, scale),
    color: 'inherit',
  }
  chart_option.series[0].axisLine = {
    lineStyle: {
      width: getScaleValue(30 * ratio, scale),
      color: [
        [0.3, '#67e0e3'],
        [0.7, '#37a2da'],
        [1, '#fd666d'],
      ],
    },
  }
  chart_option.series[0].progress = {
    show: false,
  }
}

const setOption2 = (chart_option, scale, ratio, customAttr) => {
  let series1 = chart_option.series[0]
  let series2 = JSON.parse(JSON.stringify(chart_option.series[0]))
  chart_option.series.push(series2)
  let axisColor = customAttr.gauge.axisLabel.color
  series1.axisTick = {
    distance: getScaleValue(-45 * ratio, scale, true),
    splitNumber: getScaleValue(5 * ratio, scale), // 刻度间隔数
    // length: getScaleValue(8*ratio, scale), // 子刻度线长度
    lineStyle: {
      width: getScaleValue(3 * ratio, scale),
      color: '#999', // 子刻度线宽度
    },
  }
  series1.splitLine = {
    distance: getScaleValue(-50 * ratio, scale, true),
    length: getScaleValue(14 * ratio, scale), // 刻度线长度
    lineStyle: {
      width: getScaleValue(3 * ratio, scale), // 刻度线宽度
      color: axisColor,
    },
  }
  series1.axisLabel = {
    distance: getScaleValue(-14 * ratio, scale, true), // 刻度值文字里刻度线距离
    fontSize: getScaleValue(14 * ratio, scale),
    color: axisColor,
  }
  ;(series1.anchor = {
    show: false,
  }),
    (series1.detail = {
      ...series1.detail,
      valueAnimation: true,
      width: '60%',
      lineHeight: getScaleValue(45 * ratio, scale),
      borderRadius: getScaleValue(8 * ratio, scale),
      offsetCenter: [0, '-15%'],
      fontSize: getScaleValue(45 * ratio, scale),
      fontWeight: 'bolder',
      color: customAttr.color.colors[0],
    }),
    (series1.axisLine = {
      lineStyle: {
        width: getScaleValue(30 * ratio, scale),
      },
    })
  series1.progress = {
    show: true,
    width: getScaleValue(30 * ratio, scale),
  }
  series1.splitNumber = 10
  series1.pointer = {
    show: false,
  }
  series1.center = ['50%', '60%']
  series1.startAngle = 200
  series1.endAngle = -20
  series1.itemStyle = {
    color: hexToRgba(customAttr.color.colors[0], 0.4).rgba,
  }
  series2.center = ['50%', '60%']
  series2.startAngle = 200
  series2.endAngle = -20
  series2.progress = {
    show: true,
    width: getScaleValue(8 * ratio, scale),
  }
  series2.itemStyle = {
    color: customAttr.color.colors[0],
  }
  series2.pointer = {
    show: false,
  }
  series2.axisLine = {
    show: false,
  }
  series2.axisTick = {
    show: false,
  }
  series2.splitLine = {
    show: false,
  }
  series2.axisLabel = {
    show: false,
  }
  series2.detail = {
    show: false,
  }
}

export function hexToRgba(hex, opacity) {
  //hex："#3ba272"； opacity：透明度
  let RGBA =
    'rgba(' +
    parseInt('0x' + hex.slice(1, 3)) +
    ',' +
    parseInt('0x' + hex.slice(3, 5)) +
    ',' +
    parseInt('0x' + hex.slice(5, 7)) +
    ',' +
    opacity +
    ')'
  return {
    //返回值对象
    red: parseInt('0x' + hex.slice(1, 3)),
    green: parseInt('0x' + hex.slice(3, 5)),
    blue: parseInt('0x' + hex.slice(5, 7)),
    rgba: RGBA,
  }
  //返回结果：{blue: 114， green: 162 ，red: 59 ，rgba: "rgba(59,162,114,1)"}
}
